import XtxSkeleton from './xtx-skeleton'
import XtxCarousel from './xtx-carousel'
import XtxMore from './xtx-more.vue'
import XtxBread from './xtx-bread.vue'
import XtxBreadItem from './xtx-bread-item.vue'

import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component('XtxCarousel', XtxCarousel)
    app.component('XtxMore', XtxMore)
    app.component('XtxBread', XtxBread)
    app.component('XtxBreadItem', XtxBreadItem)
    definedDirective(app)
  }
}

const definedDirective = (app) => {
  app.directive('lazyload', {
    mounted (el, bindings) {
      const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          observe.unobserve(el)
          el.src = bindings.value
          el.onerror = () => {
            el.src = defaultImg
          }
        }
      }, { threshold: 0.01 })
      observe.observe(el)
    }
  })
}
